import { type SlateElementProps, type TDateElement } from "platejs";

import { SlateElement } from "platejs";

export function DateElementStatic(props: SlateElementProps&lt;TDateElement&gt;) {
  const { element } = props;

  return (
    &lt;SlateElement className="inline-block" {...props}&gt;
      <span>
        {element.date ? (
          (() =&gt; {
            const today = new Date();
            const elementDate = new Date(element.date);
            const isToday =
              elementDate.getDate() === today.getDate() &&
              elementDate.getMonth() === today.getMonth() &&
              elementDate.getFullYear() === today.getFullYear();

            const isYesterday =
              new Date(today.setDate(today.getDate() - 1)).toDateString() ===
              elementDate.toDateString();
            const isTomorrow =
              new Date(today.setDate(today.getDate() + 2)).toDateString() ===
              elementDate.toDateString();

            if (isToday) return "Today";
            if (isYesterday) return "Yesterday";
            if (isTomorrow) return "Tomorrow";

            return elementDate.toLocaleDateString(undefined, {
              day: "numeric",
              month: "long",
              year: "numeric",
            });
          })()
        ) : (
          <span>Pick a date</span>
        )}
      </span>
      {props.children}
    &lt;/SlateElement&gt;
  );
}
